import React, { Component } from "react";

import { Layout, Menu, Badge } from "antd";
import { Route, Link } from "react-router-dom";
import {
  BarsOutlined,
  TeamOutlined,
  DotChartOutlined,
  UserOutlined,
  FormOutlined,
  SolutionOutlined,
  TrophyOutlined,
  CoffeeOutlined,
  SmileOutlined,
  DeploymentUnitOutlined,
} from "@ant-design/icons";
import loadable from "../../utils/loadable";
import { connect } from "react-redux";

import MyHeader from "../../components/header";
// import "./code.css";
const HomePage = loadable(() => import("./page/homePage/index"));
const Teacher = loadable(() => import("./page/teacher/index"));
const Student = loadable(() => import("./page/student/index"));
const Experimemt = loadable(() => import("./page/experiment/index"));
const News = loadable(() => import("./page/news/index"));
const ClassPage = loadable(() => import("./page/classPage/index"));

const AddExp = loadable(() => import("./page/tch_exp/addexp"));
const TchExped = loadable(() => import("./page/tch_exp/exp_ed"));
const TchExping = loadable(() => import("./page/tch_exp/exp_ing"));
const TchExpDetail = loadable(() => import("./page/tch_exp/exp_detail"));
const LearnCourse = loadable(() => import("./page/learnCourse/index"));

const StuExped = loadable(() => import("./page/stu_exp/exp_ed"));
const StuExping = loadable(() => import("./page/stu_exp/exp_ing"));
const StuExpDetail = loadable(() => import("./page/stu_exp/exp_detail"));
const StuMark = loadable(() => import("./page/stu_exp/stu_mark"));

const { Content, Footer, Sider } = Layout;

class Index extends Component {
  state = {
    collapsed: false,
    is_admin: false,
    is_tch: false,
    is_stu: false,
  };
  componentDidMount = () => {
    if (this.props.state.type === 0) {
      this.setState({ is_admin: true });
    } else if (this.props.state.type === 1) {
      this.setState({ is_tch: true });
    } else {
      this.setState({ is_stu: true });
    }
  };
  onCollapse = (collapsed) => {
    // console.log(collapsed);
    this.setState({ collapsed });
  };
  render() {
    const admin = (
      <Menu theme="dark" defaultSelectedKeys={["x"]} mode="inline">
        <Menu.Item key="2" icon={<TeamOutlined />}>
          <Link to="/admin/s"> 学生管理</Link>
        </Menu.Item>
        <Menu.Item key="1" icon={<UserOutlined />}>
          <Link to="/admin/t">教师管理</Link>
        </Menu.Item>

        <Menu.Item key="3" icon={<SolutionOutlined />}>
          <Link to="/admin/c">专业班级</Link>
        </Menu.Item>
        <Menu.Item key="4" icon={<FormOutlined />}>
          <Link to="/admin/n/l"> 发布通告</Link>
        </Menu.Item>
      </Menu>
    );
    const tch = (
      <Menu theme="dark" defaultSelectedKeys={["x"]} mode="inline">
        <Menu.Item key="6" icon={<DeploymentUnitOutlined />}>
          <Link to="/admin/t-ae">创建实验</Link>
        </Menu.Item>
        <Menu.Item key="7" icon={<DotChartOutlined />}>
          <Link to="/admin/t-eing">进行中</Link>
        </Menu.Item>
        <Menu.Item key="8" icon={<CoffeeOutlined />}>
          <Link to="/admin/t-eed">
            <Badge dot>已结束</Badge>
          </Link>
        </Menu.Item>
        {/* <Menu.Item key="11" icon={<SettingOutlined />}>
          个人信息
        </Menu.Item> */}
        <Menu.Item key="12" icon={<SmileOutlined />}>
          <Link to="/admin/lc/l">学习教程 </Link>
        </Menu.Item>
      </Menu>
    );
    const stu = (
      <Menu theme="dark" defaultSelectedKeys={["x"]} mode="inline">
        <Menu.Item key="5" icon={<BarsOutlined />}>
          <Link to="/admin/e">实验列表</Link>
        </Menu.Item>
        <Menu.Item key="9" icon={<DotChartOutlined />}>
          <Link to="/admin/s-eing">进行中</Link>
        </Menu.Item>
        <Menu.Item key="10" icon={<CoffeeOutlined />}>
          <Link to="/admin/s-eed">已结束</Link>
        </Menu.Item>
        <Menu.Item key="11" icon={<TrophyOutlined />}>
          <Link to="/admin/s-m">我的成绩</Link>
        </Menu.Item>
        {/* <Menu.Item key="12" icon={<SmileOutlined />}>
          我的分享
        </Menu.Item> */}
      </Menu>
    );
    return (
      <div>
        <MyHeader />
        <Layout style={{ minHeight: "100vh" }}>
          <Sider
            collapsible
            collapsed={this.state.collapsed}
            onCollapse={this.onCollapse}
          >
            <div className="logo" />
            {this.state.is_admin ? admin : null}
            {this.state.is_tch ? tch : null}
            {this.state.is_stu ? stu : null}
          </Sider>
          <Layout className="site-layout">
            <Content style={{ margin: "10px 16px" }}>
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                <Route path="/admin/h" component={HomePage} />
                <Route path="/admin/s" component={Student} />
                <Route path="/admin/t" component={Teacher} />
                <Route path="/admin/n" component={News} />
                <Route path="/admin/c" component={ClassPage} />
                <Route path="/admin/e" component={Experimemt} />
                {this.state.is_tch ? (
                  <div>
                    <Route path="/admin/t-ae" component={AddExp} />
                    <Route path="/admin/t-eing" component={TchExping} />
                    <Route path="/admin/t-eed" component={TchExped} />
                    <Route path="/admin/t-e-d" component={TchExpDetail} />
                    <Route path="/admin/lc" component={LearnCourse} />
                  </div>
                ) : null}
                <Route path="/admin/s-eing" component={StuExping} />
                <Route path="/admin/s-eed" component={StuExped} />
                <Route path="/admin/s-e-d" component={StuExpDetail} />
                <Route path="/admin/s-m" component={StuMark} />
              </div>
            </Content>
            <Footer style={{ textAlign: "center" }}>
              <span style={{ fontFamily: "arial" }}>
                Copyright &copy;2020人工智能虚拟仿真实验平台
              </span>
            </Footer>
          </Layout>
        </Layout>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(Index);
